<template>
    <el-card class="box-card">
        <template #header>
            <div class="card-header">
                <h1>实名信息</h1>
            </div>
        </template>
        <div class="tip" style="color: #7f7f7f;">
            <p><el-icon>
                    <InfoFilled />
                </el-icon>完成实名认证才可添加就诊人，进行正常挂号，为不影响您的体验，请提前进行进行实名认证</p>
        </div>
        <el-descriptions v-if="userInfo.authStatus == 1" class="margin-top" :column="1" border style="margin: 10px auto; height: 100%;">
            <el-descriptions-item label-align="center" :width="50">
                <template #label>
                    <div class="cell-item">
                        用户姓名
                    </div>
                </template>
                {{ userInfo.name }}
            </el-descriptions-item>
            <el-descriptions-item label-align="center" :width="50">
                <template #label>
                    <div class="cell-item">
                        证件类型
                    </div>
                </template>
                {{ userInfo.certificatesType == '10' ? '身份证' : '户口本' }}
            </el-descriptions-item>
            <el-descriptions-item label-align="center" :width="50">
                <template #label>
                    <div class="cell-item">
                        证件号码
                    </div>
                </template>
                {{ userInfo.certificatesNo }}
            </el-descriptions-item>

        </el-descriptions>
        <!-- 用户未验证 -->
        <el-form ref="form" v-else style="width: 40%;height: 100%; margin: 20px auto;" label-width="80" :model="params" :rules="rules">
            <el-form-item label="用户姓名" prop="name">
                <el-input placeholder="请输入用户姓名" v-model="params.name"></el-input>
            </el-form-item>
            <el-form-item label="证件类型" prop="certificatesType">
                <el-select placeholder="请选择证件类型" style="width: 100%;" v-model="params.certificatesType">
                    <el-option :label="item.name" :value="item.value" v-for="(item, index) in arrType"
                        :key="index"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="证件号码" prop="certificatesNo">
                <el-input placeholder="请输入证件号码" v-model="params.certificatesNo"></el-input>
            </el-form-item>
            <el-form-item label="上传证件" prop="certificatesUrl">
                <el-upload ref="upload" list-type="picture-card" :on-preview="handlePictureCardPreview"
                    :on-success="successhandler" :on-exceed="exceedhandler" :on-remove="handleRemove" :limit="1"
                    action="/api/oss/file/fileUpload?fileHost=userAuah">
                    <el-icon>
                        <Plus />
                    </el-icon>
                </el-upload>
                <el-dialog v-model="dialogVisible">
                    <img v-if="params.certificatesUrl" :src="params.certificatesUrl" style="width:100%;height: 100%;"
                        alt="Preview Image" />
                </el-dialog>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="default" @click="submit">提交</el-button>
                <el-button @click="restart">重写</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>
<script setup lang="ts">
import {
    InfoFilled, Plus
} from '@element-plus/icons-vue';
import { reqUserCertation, reqUserInfo, reqCertation } from "../../../api/user";
import type { UserParam, UserInfoResponseData, CertationTypeResponseData, CertationArr } from '../../../api/user/type';
import { onMounted, reactive, ref } from 'vue';
import { ElMessage } from 'element-plus';
let userInfo: any = ref<any>({});
let arrType = ref<CertationArr>([]);
let dialogVisible = ref<boolean>(false);
let upload = ref();
let form = ref();
let params = reactive<UserParam>({
    "certificatesType": '',
    "certificatesNo": '',
    "certificatesUrl": '',
    "name": '',
});
onMounted(() => {
    getUserInfo();
    getType();
});
const getUserInfo = async () => {
    let result: UserInfoResponseData = await reqUserInfo();
    if (result.code == 200) {
        userInfo.value = result.data;
    }
};
const getType = async () => {
    let result: CertationTypeResponseData = await reqCertation();
    if (result.code == 200) {
        arrType.value = result.data;
    }
};
const exceedhandler = () => {
    ElMessage({
        type: 'error',
        message: "图片只能上传一张"
    });
};
const successhandler = (response: any, uploadFile: any, uploadFiles: any) => {
    form.value.clearValidate('validatorUrl');
    params.certificatesUrl = response.data;
};
const handlePictureCardPreview = (uploadFile: any) => {
    dialogVisible.value = true;
};
const handleRemove = () => {
    params.certificatesUrl = '';
};
const restart = () => {
    upload.value.clearFiles();
    Object.assign(params, {
        "certificatesType": '',
        "certificatesNo": '',
        "certificatesUrl": '',
        "name": '',
    })
};
const submit = async () => {
    await form.value.validate();
    try {
        await reqUserCertation(params);
        ElMessage({
            type: 'success',
            message: "认证成功"
        });
        getUserInfo();
    } catch (error) {
        ElMessage({
            type: 'error',
            message: "认证失败"
        });
    }
};

const validatorName = (rule: any, value: any, callBack: any) => {
    const reg = /^[\u00B7\u3007\u3400-\u4DBF\u4E00-\u9FFF\uE000-\uF8FF\uD840-\uD8C0\uDC00-\uDFFF\uF900-\uFAFF]+$/;
    if (reg.test(value)) {
        callBack();
    } else {
        callBack(new Error('请输入正确名字'))
    }
};
const validatorType = (rule: any, value: any, callBack: any) => {
    if (value == '10' || value == '20') {
        callBack();
    } else {
        callBack(new Error('请选择证件的类型'))
    }
};
const validatorNo = (rule: any, value: any, callBack: any) => {
    const sfz = /^([1-9]\d{5})(\d{4})(\d{2})(\d{2})(\d{3})(\d|X)$/;
    const hkb = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    if (sfz.test(value) || hkb.test(value)) {
        callBack();
    } else {
        callBack(new Error('请输入身份证或户口本号码'))
    }
};
const validatorUrl = (rule: any, value: any, callBack: any) => {
    if (value.length) {
        callBack();
    } else {
        callBack(new Error('请上传证件照'));
    }
}
// 自定义表单校验
const rules = {
    //required务必校验,validator改变时校验
    name: [
        {
            required: true,
            validator: validatorName,
        },
    ],
    certificatesType: [{
        required: true,
        validator: validatorType,
    }],
    certificatesNo: [{
        required: true,
        validator: validatorNo,
    }],
    certificatesUrl: [{
        required: true,
        validator: validatorUrl,
    }]
}
</script>
<style scoped lang="scss">
.box-card {
    .tip {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
    }
}
</style>